<template>
  <transition name="slide">
    <div class="my_page">
      <div class="scroll" ref="wrapper">
        <div>
          <div class="user_img">
            <div class="img_grp">
              <img :src="userData.user_img" alt="">
            </div>
            <p>{{userData.user_name}}</p>
            <!--<p>粉丝：{{userData.fans_count}}</p>-->
            <!--<div class="btn_grp">-->
            <!--<div class="btn add_follow">+关注</div>-->
            <!--<div class="btn msg">私信</div>-->
            <!--</div>-->
          </div>
          <user-nav></user-nav>
          <ul class="type_list">
            <li class="module publish_article"  v-for="v in dynamics"  >
              <div class="li_header" v-if="v.type_id == 2">
                <span class="iconfont icon-mo"></span> <span>发布了文章</span><span> {{v.time | time}} </span>
              </div>
              <div class="li_header" v-if="v.type_id == 3 && v.fmtid">
                <span class="iconfont icon-star-icon"></span> <span>收藏了音频</span> <span> {{v.time | time}}</span>
              </div>
              <div class="li_header" v-if="v.type_id == 3 && v.aid">
                <span class="iconfont icon-star-art"></span> <span>收藏了文章</span> <span> {{v.time | time}} </span>
              </div>
              <div class="li_header"  v-if="v.type_id == 1 ">
                <span class="iconfont icon-follow"></span> <span>关注了用户</span> <span>{{v.time | time}}</span>
              </div>
              <div class="li_content" v-if="v.type_id == 2 || (v.type_id == 3 && v.aid)" @click="selectArticle(v.aid)">
               {{v.content}}
              </div>
              <div class="fm_grp" v-if="v.type_id == 3 && v.fmtid" @click="selectFm(v.fmtid,v.fid)">
                <div class="img_grp">
                  <img :src="v.pic" alt="">
                  <div class="icon_grp">
                    <span class="iconfont icon-play-icon"></span>
                  </div>
                </div>
                <div class="fm_content">
                  <div class="fm_title">
                    {{v.fm}}
                  </div>
                  <div class="fm_author">
                  {{v.from}}
                  </div>
                </div>

              </div>
              <div class="follow_content" v-if="v.type_id == 1">
                <div class="img_grp">
                  <img src="" alt="">
                </div>
                <div class="user_content">
                  <div class="user_name">
                    黑玫瑰
                  </div>
                  <div class="user_brief">
                    比你牛逼的人多了去，你还不好好…
                  </div>

                  <div class="add_follow">
                    +关注
                  </div>
                </div>

              </div>
              <div class="other_grp" v-if="v.type_id != 1">
                <span class="iconfont icon-chakan"> {{v.view}}</span>
                <span class="iconfont icon-zan2-icon"> {{v.like}}</span>
              </div>
            </li>
          </ul>
          <div class="null"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import Bscroll from "better-scroll"
  import UserNav from './components/nav'
  export default {
    name:'MyPage',
    data(){
      return{
        nav:[],
        dynamics:[]
      }
    },
    computed: {
      userData(){
        return this.$store.getters.getUser
      }
    },
    mounted(){
      this.getMyPage()
      this.scroll = new Bscroll(this.$refs.wrapper,{
        click:true,
      })
    },

    methods:{
      selectFm(fmtid,fid){
        this.$router.push({path:`/fmPlayer/${fmtid}/${fid}`})
      },

      selectArticle(aid){
        this.$router.push({path:`/article/${aid}`})
      },

      getMyPage(){
        this.axios.get('/api/myPage.json').then((res)=>{
         res =res.data
          if(res.ret && res.data){
            const data = res.data
            this.nav = data.nav
            this.dynamics = data.dynamics
          }
        })
      }
    },
    components:{
      UserNav
    }
  }
</script>

<style scoped>
  .null{
    height: 120px;
  }
  .my_page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    min-height: 1334px;
    background-color: #f5f4f7;
    width: 100%;
  }
  .scroll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .user_img {
    width: 100%;
    height: 400px;
    background-image: url("../../common/image/ding.png");
    background-size: cover;
    text-align: center;
    position: relative;
    padding-top: 80px;

  }

  .user_img .img_grp {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 0 auto 0 auto;
    /*border: solid 1px #c5c5c7;*/
    overflow: hidden;
  }

  .user_img p {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 36px;
    color: white;
  }

  .user_img p:nth-of-type(2) {
    margin-top: 0;
    font-size: 24px;
  }

  .btn_grp {
    height: 80px;
  }

  .btn {
    display: inline-block;
    margin: 0 24px;
    border-radius: 40px;
    border: solid 1px white;
    font-size: 26px;
    padding: 8px 22px;

  }

  .add_follow {
    background-color: white;
    opacity: 0.7;
    color: #059692;
  }

  .msg {
    color: white;
    padding: 8px 28px;
  }


  li {
    padding: 47px 25px 30px 57px;
  }

  .iconfont {
    font-size: 30px;
  }

  .icon-mo {
    font-size: 32px;
    color: #78b8ff;
  }

  .icon-star-icon {
    color: #d87777;
  }

  .icon-star-art {
    color: #78cbb5;
  }

  .icon-follow {
    font-size: 36px;
    color: #eaad76;
  }

  .li_header {
    margin-bottom: 26px;
  }

  .li_header span:nth-of-type(2) {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    padding: 0 10px;
  }

  .li_header span:nth-of-type(3), .li_header span:nth-of-type(4) {
    font-size: 24px;
    color: #666666;
    float: right;
    margin-left: 20px;
    margin-top: 12px;
  }

  .li_content {
    font-size: 28px;
    color: #999;
    line-height: 1.64;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-left: 48px;
  }

  .other_grp {
    font-size: 24px;
    color: #c5c5c7;
    margin-top: 30px;
    padding-left: 48px;
  }

  .other_grp span {
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .fm_grp {
    background-color: #f5f4f7;
    margin-left: 48px;
    padding: 18px 20px 20px 20px;
  }

  .fm_grp .img_grp {
    width: 80px;
    height: 80px;
    border: solid 1px #c5c5c7;
    margin-right: 20px;
    border-radius: 4px;
    float: left;
  }

  .icon_grp {
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
    position: absolute;
    left: 0;
    top: 0;
  }

  .icon_grp span {
    color: white;
    font-size: 40px;
    display: block;
    margin: 20px 19px;
  }

  .fm_content {
    width: auto;
  }

  .fm_title {
    font-size: 28px;
    color: #999;
    line-height: 1.64;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fm_author {
    font-size: 24px;
    color: #c5c5c7;
  }

  .follow_content .img_grp {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    float: left;
  }

  .user_content {
    width: auto;
    position: relative;
  }

  .user_name {
    font-size: 30px;
    color: #666666;
  }

  .user_brief {
    font-size: 22px;
    color: #c5c5c7;
  }

  .user_content .add_follow {
    position: absolute;
    width: 106px;
    height: 50px;
    background-color: #059692;
    color: white;
    right: 0;
    top: 10px;
    border-radius: 25px;
    text-align: center;
    padding: 7px 10px;
    font-size: 26px;
    opacity: 1;
  }

</style>
